<template>
	<view style="position: relative;">
		<view>
			<image :src="img" mode="widthFix" style="width: 750rpx;vertical-align: top;"></image>
			<image :src="img_" mode="widthFix" style="width: 750rpx;vertical-align: top;"></image>
		</view>
		<view style="position: absolute;top:1250rpx;left: 15rpx;">
			<image :src="list" mode="widthFix" style="width: 719rpx;vertical-align: top;" @tap.stop="add"></image>
		</view>
		<view>
			<van-popup :show="shang_show" position="center" z-index="12121">
			    <view class="neibu">
			       <view style="font-size: 35rpx;font-weight: bold;">填写资料</view>
				   <view style="display: flex;flex-direction: column;justify-content: space-between;height: 600rpx;background: #FFFFFF;">
					   <view class="inp">
						   <input type="text" value="" placeholder="请输入宝贝姓名" class="in" v-model="xingming"/>
					    </view>
					    <view class="inp">
							<picker @change="bindPickerChange_" :value="index" :range="array_">
								<view class="uni-input">{{xingbie}}</view>
							</picker>
					    </view>
					    <view class="inp">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{guanxi}}</view>
							</picker>
					    </view>
					    <view class="inp">
					    	    <input type="number" value="" placeholder="输入宝贝年龄" class="in" v-model="nianling"/>
					    </view>
					    <view class="inp">
					    	    <input type="text" value="" placeholder="输入宝贝爱好" class="in" v-model="pianhao"/>
					    </view>
					   <view class="inp">
					   	    <input type="number" value="" placeholder="请输入手机号" class="in" v-model="phone" @blur="chuqu"/>
					   </view>
					   <view class="inp" style="position: relative;">
					   	    <input type="number" value="" placeholder="请输入验证码" class="in" v-model="yanzheng" />
							<view style="position: absolute;color: #FF7300;font-size: 25rpx;background: transparent;min-width: 100rpxrpx;left: 250rpx;height: 50rpx;line-height: 50rpx;top: 0;z-index: 12121213212;" @tap.stop="yanzhen">{{content}}</view>
					   </view>
					   <view style="display: flex;justify-content: space-between;width: 394rpx;margin-top: 10rpx;" class="in">
						  <view class="inpp" @tap.stop="fanhui">取消</view>
						  <view class="inpp" @tap.stop="lingqu" style="background: #FF7300;color: #FFFFFF;">领取</view>
					   </view>
				   </view>
			    </view>
			</van-popup>
			<van-popup position="center" :show="list_show" z-index="12121">
				<view>
					<image :src="list_img" style="width: 525rpx;height: 324rpx;" @tap.stop="go"></image>
				</view>
			</van-popup>
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				img: "http://img.curiousmore.com/619557",
				img_: "http://img.curiousmore.com/338360",
				list: "http://img.curiousmore.com/186295",
				show: false,
				xingming: "",
				xingbie: "请选择性别",
				guanxi: "请选择关系",
				nianling: "",
				pianhao: "",
				phone: "",
				yanzheng: "",
				array: ["父子","母子","其他"],
				array_: ["男","女"],
				num: 132121321,
				bgColor: "#ffffff",
				maskAlpha: 0.8,
				content: "获取验证码",
				isshow: false,
				list_img: "http://img.curiousmore.com/470317",
				shang_show: false,
				list_show: false
			}
		},
		methods:{
			go(){
				uni.reLaunch({
					url:"/pages/Friend/videoChat/videoChat"
				})
			},
			add(){
				this.shang_show = true
			},
			fanhui(){
				uni.navigateBack({
				    delta: 1
				})
			},
		async	lingqu(){
				let sex = ""
				if(this.xingbie == "男"){
					sex = 1
				}else if(this.xingbie == "女"){
					sex = 2
				}else{
					sex = ""
				}
				if(sex != "" && this.guanxi != "请选择关系" && this.pianhao != "" && this.phone != "" && this.xingming != "" && this.yanzheng != "" && this.nianling != ""){
					const res = await this.$myRequest({
						url:"/user/insertH5GetCoupon",
						methed: "post",
						header: {
							'content-type' : 'application/json'
						},
						data:{
							login_name: this.phone,
							verification_code: this.yanzheng,
							nick_name: this.xingming,
							sex: sex,
							preference: this.pianhao,
							relationships: this.guanxi,
							age: this.nianling
						}
					})
					if(res.code == 0){
						this.shang_show = false
						this.list_show = true
						try{
							uni.setStorageSync('lingqu',123)
						}catch(e){}
					}else{
						uni.showToast({
							title: res.message,
							icon:"none"
						})
					}
				}
			},
			chuqu(){
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){ 
					uni.showToast({
						title:"请输入正确电话号",
						icon:"none"
					})
					this.phone = ""
				}
			},
			bindPickerChange(guanxi){
				this.guanxi = this.array[guanxi.detail.value]
			},
			bindPickerChange_(xingbie){
				this.xingbie = this.array_[xingbie.detail.value]
			},
		async	yanzhen(){
				if(this.phone == ""){
					uni.showToast({
						title:"请输入电话号码",
						icon:"none"
					})
				}else{
					const res = await this.$myRequest({
						url:"/sms/send",
						data:{
							mobile: this.phone
						}
					})
					if(res.code == 0){
						uni.showToast({
							title:"成功"
						})
						this.yan()
					}
				}
			},
			yan(){
				let miao = 60
				let val = setInterval(() => {
					if(miao > 0){
						this.content = miao + "s"
						miao--
					}else{
						clearInterval(val)
						this.content = "获取验证码"
					}
				},1000)
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		}
	}
</script>
<style lang="scss" scoped>
	.neibu{
		width: 500rpx;
		height: 677rpx;
		box-sizing: border-box;
		padding: 50rpx 50rpx 50rpx 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFFFFF;
		border-radius: 18rpx;
		position: relative;
		z-index: 12121212121;
	}
	.inp{
		width: 400rpx;
		height: 60rpx;
		border-bottom:1rpx solid #C1C1C1;
		.in{
			font-size: 25rpx;
			text-align: left;
		}
	}
	.inpp{
		width: 150rpx;
		height: 50rpx;
		color: #FF7300;
		font-size: 30rpx;
		border: 1rpx solid #FF7300;
		line-height:  50rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.uni-input{
		font-size: 25rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
</style>